﻿$(function () {
    $('#myTab a:first').tab('show')
    $('#myTab1 a:first').tab('show')
})

function initialize(utilities, latitude, longitude) {
    var here = new google.maps.LatLng(latitude, longitude);
    var map;
    var marker;
    var mapOptions = {
        zoom: 14,
        center: here,
        scrollwheel: false,
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
    $.each(utilities, function (index) {
        var marker = new google.maps.Marker({
            map: map,
            draggable: false,
            animation: google.maps.Animation.DROP,
            position: new google.maps.LatLng(utilities[index].latitude, utilities[index].longitude),
            title: utilities[index].name,
            icon: '/Images/marker.png'
        });
        
        $.ajax({
            type: "POST",
            url: "/Room/UtilityView",
            content: "application/json; charset=utf-8",
            data: utilities[index],
            dataType: "json",
            success: function (d) {
                $('#utilities-container').append(d.content);
            },
            error: function (xhr, textStatus, errorThrown) {
                // TODO: Show error
            }
        });
    });
    marker = new google.maps.Marker({
        map: map,
        draggable: false,
        animation: google.maps.Animation.DROP,
        position: here
    });
    google.maps.event.addListener(marker, 'click', function () {
        if (marker.getAnimation() != null) {
            marker.setAnimation(null);
        } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    });
}

function initialize_pano() {
    var myPanoid = "dUPmWHInem8AAAQJOEzHnA";
    var panoramaOptions = {
        pano: myPanoid,
        pov: {
            heading: 45,
            pitch: -2
        },
        zoom: 1
    };
    var myPhotoSphere = new google.maps.StreetViewPanorama(
        document.getElementById('pano-canvas'),
        panoramaOptions);
    myPhotoSphere.setVisible(true);
}

function ValidateReview() {
    var error = false;
    if ($('#cmtTitle').val() == "" || $('#cmtContent').val() == "") {
        alert("Title and Content must not empty!");
        error = true;
    } else {
        error = false;
    }
    return error;
}

function LoadReviews() {
    var idRoom = $('#roomid').val();
    $.ajax({
        type: "POST",
        url: "/Room/GetRoomReviews",
        content: "application/json; charset=utf-8",
        data: 40,
        dataType: "json",
        success: function (d) {

            // $('.housereviews').append(d.content);
        },
        error: function (xhr, textStatus, errorThrown) {
            // TODO: Show error
        }
    });
}

$(document).ready(function () {
    //Get amentities
    var roomId = $(".room-container").attr("id").split("-")[1];
    var data = { roomId: 49 };
    $.ajax({
        url: '/Room/GetObjects',
        type: 'POST',
        content: "application/json; charset=utf-8",
        dataType: "json",
        data: data,
        success: function (data) {
            var amentities = data.amentities;
            $.each(amentities, function (i) {
                if (amentities[i].isTrue == "true") {
                    $("#amentities").find("#item-" + amentities[i].id + " span.glyphicon").css({
                        'visibility': 'visible'
                    });
                    $("#amentities").find("#item-" + amentities[i].id + " span.item").css({
                        'color': 'black'
                    });
                }
            });
            initialize(data.utilities, data.latitude, data.longitude);
            initialize_pano();
        },
        error: function (xhr, textStatus, errorThrown) {
            alert(xhr.responseText);
        }
    });

    $('#btnView360').click(function () {
        $(".hero3").addClass("view");
    });
    $('#btnBack360').click(function () {
        $(".hero3").removeClass("view");
    });

    $('.imgsmall').click(function () {
        var imgArray = new Array(
                       "/Images/image1.png",
                       "/Images/image2.png",
                       "/Images/image3.png",
                       "/Images/image4.png"
                    );
        var img = $(this);
        $('#modalDiv img').attr("src", img.attr("src"));
        //$('#modalDiv img').attr("src", imgArray[numImages-1]);
        $('#modalBackground').show();
        $('#modalDiv').show();
        var top = Math.max($(window).height() / 2 - $('#modalDiv')[0].offsetHeight / 2, 0);
        var left = Math.max($(window).width() / 2 - $('#modalDiv')[0].offsetWidth / 2, 0);
        $('#modalDiv').css('top', top + "px");
        $('#modalDiv').css('left', left + "px");
        var numImages = 4;
        var curImage = imgArray.indexOf(img.attr("src")) + 1;
        //var index = imageList.indexOf(200);
        $('#imgnext').click(function () {
            curImage = curImage + 1;
            if (curImage > numImages)
            { curImage = 1; }
            if (curImage == 0)
            { curImage = numImages; }

            $('#modalDiv img').attr("src", imgArray[curImage - 1]);
        });
        $('#imgpre').click(function () {
            curImage = curImage - 1;
            if (curImage > numImages)
            { curImage = 1; }
            if (curImage == 0)
            { curImage = numImages; }
            $('#modalDiv img').attr("src", imgArray[curImage - 1]);
        });
    });

    $('#thoat').click(function () {
        $('#modalBackground').hide();
        $('#modalDiv').hide();
    });

    $('#modalBackground').click(function () {
        $('#modalBackground').hide();
        $('#modalDiv').hide();
    });

    $('#btnComment').click(function (e) {
        e.preventDefault();
        if (ValidateReview() == false) {
            $.ajax(
                {
                    type: "POST",
                    url: "/Room/AddRoomReview",
                    data: $("#formReview").serialize(),
                    dataType: "json",
                    success: function (data) {
                        if (data.success == false) {
                            alert('Error');

                        } else {
                            //$('.tab-content #reviews').append("<div class='media'>" +
                            //    "<a class='pull-left' href='#'>" + "<img class='media-object' src='#' />" +
                            //    "</a>" +
                            //    "<div class='media-body reviewdetail'>"+
                            //   "<h4 class='media-heading'>"+ $('#cmtTitle').val()+"</h4>" +
                            //   $('#cmtContent').val()+
                            //   "<div class='reviewdate'>"+ Date.now() +"</div>" +
                            //    "</div>"+
                            //    "</div>");
                            $('#cmtTitle').val() = "";
                            $('#cmtContent').val() = "";
                        }
                    }

                });
        }
    });
});

